<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的收藏 - 诗词学习应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2B48C',
            accent: '#A52A2A',
            light: '#F5F5DC',
            success: '#4CAF50',
            warning: '#FFC107',
            danger: '#F44336',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Noto Serif SC', 'serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .btn-primary {
        background-color: #8B4513;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 300ms ease;
        &:hover {
          background-color: rgba(139, 69, 19, 0.8);
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.5);
        }
      }
      .btn-secondary {
        background-color: #D2B48C;
        color: #8B4513;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 300ms ease;
        &:hover {
          background-color: rgba(210, 180, 140, 0.8);
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.5);
        }
      }
      .btn-success {
        background-color: #4CAF50;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 300ms ease;
        &:hover {
          background-color: rgba(76, 175, 80, 0.8);
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
        }
      }
      .btn-danger {
        background-color: #F44336;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 300ms ease;
        &:hover {
          background-color: rgba(244, 67, 54, 0.8);
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.5);
        }
      }
      .nav-item {
        color: white;
        transition: color 300ms ease;
        &:hover {
          color: #D2B48C;
        }
      }
      .day-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 300ms ease;
        &:hover {
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
      }
      .day-card.completed {
        background-color: rgba(76, 175, 80, 0.1);
        border: 1px solid rgba(76, 175, 80, 0.3);
      }
      .day-card.in-progress {
        background-color: rgba(255, 193, 7, 0.1);
        border: 1px solid rgba(255, 193, 7, 0.3);
      }
      .progress-bar {
        height: 0.25rem;
        background-color: #E5E7EB;
        border-radius: 0.25rem;
        overflow: hidden;
      }
      .progress-fill {
        height: 100%;
        transition: all 500ms ease-out;
      }
      .poem-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        border-bottom: 1px solid #E5E7EB;
        &:last-child {
          border-bottom: none;
        }
      }
      .poem-item.completed {
        background-color: rgba(76, 175, 80, 0.05);
      }
      .favorite-item {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: all 300ms ease;
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }
      }
    }
  </style>
</head>
<body class="bg-light min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-primary text-white shadow-lg sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-book text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold">拾光诗栈</h1>
      </div>
      
      <div class="hidden md:flex space-x-8">
        <a href="index.html" class="nav-item flex items-center"><i class="fa fa-home mr-2"></i>首页</a>
        <a href="browse.html" class="nav-item flex items-center"><i class="fa fa-list mr-2"></i>诗词库</a>
        <a href="plan.html" class="nav-item flex items-center"><i class="fa fa-calendar mr-2"></i>学习计划</a>
        <a href="favorite.html" class="nav-item flex items-center"><i class="fa fa-heart mr-2"></i>我的收藏</a>
        <a href="login.html" class="nav-item flex items-center"><i class="fa fa-cog mr-2"></i>登录</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <button id="mobile-menu-btn" class="md:hidden text-white focus:outline-none">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-primary/95 backdrop-blur-md hidden animate-fadeIn">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-home mr-2 w-5"></i>首页
        </a>
        <a href="browse.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-list mr-2 w-5"></i>诗词库
        </a>
        <a href="plan.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-calendar mr-2 w-5"></i>学习计划
        </a>
        <a href="favorite.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-heart mr-2 w-5"></i>我的收藏
        </a>
        <a href="login.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-cog mr-2 w-5"></i>登录
        </a>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 返回按钮 -->
    <div class="mb-6">
      <a href="index.html" class="inline-flex items-center text-primary hover:underline">
        <i class="fa fa-arrow-left mr-2"></i>返回首页
      </a>
    </div>
    
    <!-- 收藏标题 -->
    <section class="mb-8">
      <h2 class="text-2xl md:text-3xl font-bold text-primary mb-4">我的收藏 <span id="favorite-count" class="text-lg text-gray-600">(4)</span></h2>
      
      <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
          <div>
            <h3 class="text-xl font-bold mb-2">已收藏的诗词</h3>
            <p class="text-gray-600">收藏喜欢的诗词，随时回顾学习</p>
          </div>
          <div class="mt-4 md:mt-0">
            <button class="btn-secondary">
              <i class="fa fa-share-alt mr-1"></i> 分享收藏
            </button>
          </div>
        </div>
        
        <!-- 收藏列表 -->
        <div class="favorite-list space-y-3">
          <!-- 收藏项将通过JavaScript动态生成 -->
        </div>
        
        <!-- 分页 -->
        <div class="mt-8 flex justify-center">
          <nav class="flex items-center space-x-1">
            <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-primary hover:text-white transition-colors duration-300">
              <i class="fa fa-chevron-left"></i>
            </a>
            <a href="#" class="px-3 py-1 rounded bg-primary text-white">1</a>
            <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-primary hover:text-white transition-colors duration-300">2</a>
            <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-primary hover:text-white transition-colors duration-300">3</a>
            <span class="px-2 text-gray-500">...</span>
            <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-primary hover:text-white transition-colors duration-300">12</a>
            <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-primary hover:text-white transition-colors duration-300">
              <i class="fa fa-chevron-right"></i>
            </a>
          </nav>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">诗词学习</h3>
          <p class="text-gray-300">探索中国古典诗词的魅力，感受千年文化的积淀，提升文学素养。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-github text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="index.html" class="text-gray-300 hover:text-white transition-colors duration-300">首页</a></li>
            <li><a href="browse.html" class="text-gray-300 hover:text-white transition-colors duration-300">诗词库</a></li>
            <li><a href="plan.html" class="text-gray-300 hover:text-white transition-colors duration-300">学习计划</a></li>
            <li><a href="favorite.html" class="text-gray-300 hover:text-white transition-colors duration-300">我的收藏</a></li>
            <li><a href="login.html" class="text-gray-300 hover:text-white transition-colors duration-300">登录</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-envelope-o mt-1 mr-2"></i>
              <span class="text-gray-300">contact@shicixuexi.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone mt-1 mr-2"></i>
              <span class="text-gray-300">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span class="text-gray-300">北京市海淀区中关村南大街5号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2025 诗词学习平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });

    // 渲染收藏列表
    document.addEventListener('DOMContentLoaded', function() {
      const favoriteList = document.querySelector('.favorite-list');

      // 从本地存储获取收藏数据，如果没有则初始化空数组
      const favorites = JSON.parse(localStorage.getItem('favorites')) || [];

      // 更新收藏数量
      document.getElementById('favorite-count').textContent = `(${favorites.length})`;

      if (favorites.length === 0) {
        favoriteList.innerHTML = `
          <div class="py-12 text-center">
            <i class="fa fa-heart-o text-5xl text-gray-300 mb-4"></i>
            <p class="text-gray-500">您还没有收藏任何诗词</p>
            <a href="browse.html" class="btn-primary mt-4 inline-block">
              <i class="fa fa-plus mr-1"></i> 去添加收藏
            </a>
          </div>
        `;
        return;
      }

      // 渲染收藏项
      favoriteList.innerHTML = favorites.map(favorite => `
        <div class="favorite-item" data-id="${favorite.id}">
          <div class="flex flex-col md:flex-row justify-between">
            <div>
              <h4 class="font-bold text-lg mb-1">${favorite.title}</h4>
              <p class="text-gray-600">${favorite.author}</p>
              <p class="mt-2 text-gray-800 text-sm">${favorite.content}</p>
            </div>
            <div class="mt-4 md:mt-0 flex flex-col items-end space-y-3">
              <div class="flex space-x-2">
                <a href="detail.html?id=${favorite.id}" class="btn-primary btn-sm py-1 px-3 text-sm">
                  <i class="fa fa-book mr-1"></i> 学习
                </a>
                <button class="remove-favorite text-gray-500 hover:text-danger transition-colors duration-300">
                  <i class="fa fa-trash-o text-xl"></i>
                </button>
              </div>
              <span class="text-xs text-gray-500">收藏于 ${favorite.date}</span>
            </div>
          </div>
        </div>
      `).join('');

      // 绑定移除事件
      document.querySelectorAll('.remove-favorite').forEach(button => {
        button.addEventListener('click', function() {
          const poemItem = this.closest('.favorite-item');
          const poemId = poemItem.dataset.id;

          if (confirm('确定要移除这首诗词吗？')) {
            // 从本地存储中移除
            const updatedFavorites = favorites.filter(f => f.id !== poemId);
            localStorage.setItem('favorites', JSON.stringify(updatedFavorites));

            // 从DOM中移除
            poemItem.classList.add('opacity-0', 'scale-95');
            poemItem.style.transition = 'all 0.3s ease-out';

            setTimeout(() => {
              poemItem.remove();
              // 更新收藏数量
              document.getElementById('favorite-count').textContent = `(${updatedFavorites.length})`;

              if (updatedFavorites.length === 0) {
                favoriteList.innerHTML = `
                  <div class="py-12 text-center">
                    <i class="fa fa-heart-o text-5xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500">您还没有收藏任何诗词</p>
                    <a href="browse.html" class="btn-primary mt-4 inline-block">
                      <i class="fa fa-plus mr-1"></i> 去添加收藏
                    </a>
                  </div>
                `;
              }
            }, 300);
          }
        });
      });
    });
  </script>
</body>
</html>